<script setup>
import ContestDetailList from "@/components/components/contestDetailList.vue";
import {ref} from "vue";
import PayAttention from "@/components/components/payAttention.vue";
import UserInformation from "@/components/components/userInformation.vue";
import TopRated from "@/components/components/topRated.vue";
const msg = ref("你好")
</script>

<template>
<body class="main">
  <div class="left">
    <contest-detail-list :msg="msg"></contest-detail-list>
  </div>
  <div class="right">
    <pay-attention class="pa"></pay-attention>
    <user-information class="uI"></user-information>
    <top-rated class="tr"></top-rated>
  </div>
</body>
</template>

<style scoped>
.main{
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  background-color: #22272E;
  .left{
    width: 70%;
    height: 100%;
    margin-right: 1rem;
  }

  .right{
    margin-top: 1rem;
    width: 30%;
    height: 100%;

    .uI{
      margin-top: 1rem;
    }

    .tr{
      margin-top: 1rem;
    }
  }
}
</style>